<template>
  <div class="userInfoSubject">
    <div class="bannerImg">
      <van-image
        src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1812061010,3491357758&fm=26&gp=0.jpg"
      />
      <div>
        <van-image
          class="userTitle"
          fit="cover"
          round
          src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3379853115,4288689291&fm=26&gp=0.jpg"
        />
      </div>
      <van-icon name="arrow-left" @click="returnPage" />
    </div>
    <div class="statistics">
      <div class="follow">
        <font>{{ followNum }}</font>
        <font>关注</font>
      </div>
      <div class="fans">
        <font>{{ fansNum }}</font>
        <font>粉丝</font>
      </div>
    </div>
    <div class="userInfo">
      <div>{{ userInfo.userName }}</div>
      <div>
        <van-button
          round
          type="info"
          color="#ffffff"
          @click="userInfoUpdateShow = true"
          >编辑</van-button
        >
      </div>
    </div>
    <div class="collection">
      <div class="collectionHeard">
        <font class="title">收藏</font>
        <font class="more" @click="toComicCellPage('collection', '我的收藏')"
          >更多<van-icon name="arrow"
        /></font>
      </div>
      <div class="collectionMain">
        <swiper-slide-overflow-com
          :comicList="vipList"
        ></swiper-slide-overflow-com>
      </div>
    </div>
    <van-popup
      v-model="userInfoUpdateShow"
      position="bottom"
      closeable
      close-icon="close"
      lose-icon-position="top-left"
      :style="{ height: '100%', width: '100%' }"
      @close="userInfoUpdateClose"
    >
      <van-form>
        <van-field v-model="nickName" name="nickName" label="头像">
          <template #input>
            <van-uploader v-model="uploader" multiple :max-count="1" />
          </template>
        </van-field>

        <van-field
          v-model="nickName"
          name="nickName"
          label="昵称"
          placeholder="请输入昵称"
        />
        <van-field name="sex" label="性别">
          <template #input>
            <van-radio-group v-model="sex" direction="horizontal">
              <van-radio name="1">男</van-radio>
              <van-radio name="2">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-model="birth"
          name="birth"
          label="生日"
          placeholder="请选择生日"
          @click="calendarShow = true"
        />
        <van-field
          v-model="userContent"
          name="userContent"
          label="个性签名"
          placeholder="用几句话介绍自己吧``"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >确认修改</van-button
          >
        </div>
        <van-calendar
          v-model="calendarShow"
          @confirm="calendarConfirm"
          :min-date="minDate"
        />
      </van-form>
    </van-popup>
  </div>
</template>

<script>
import SwiperSlideOverflowCom from '../../components/SwiperSlideOverflowCom';
export default {
  components: {
    SwiperSlideOverflowCom
  },
  data () {
    return {
      followNum: 0,
      fansNum: 0,
      userInfo: { userName: '二狗子' },
      vipList: [
        { chapter: '最新 第12话', groupName: 'vip', imgPath: 'http://mhfm5tel.cdndm5.com/63/62312/20200821152720_180x240_28.jpg', title: '堂岛同学毫不动摇' },
        { chapter: '最新 第4话', groupName: 'vip', imgPath: 'http://mhfm5tel.cdndm5.com/58/57433/20200210223320_180x240_25.jpg', title: '魔术师们的混乱' },
        { chapter: '最新 第13话', groupName: 'vip', imgPath: 'http://mhfm5tel.cdndm5.com/66/65265/20201224183554_180x240_17.jpg', title: 'Juveniles少年' },
        { chapter: '最新 第114话', groupName: 'vip', imgPath: 'http://mhfm2tel.cdndm5.com/51/50721/20190920114355_180x240_22.jpg', title: 'BLUE LOCK' },
        { chapter: '最新 第19话', groupName: 'vip', imgPath: 'http://mhfm4tel.cdndm5.com/62/61412/20200718102701_180x240_21.jpg', title: 'ABO!!你喜欢哪种类型' },
        { chapter: '最新 第477.2话', groupName: 'vip', imgPath: 'http://mhfm6tel.cdndm5.com/18/17898/20190801205321_180x240_31.jpg', title: '女仆长的每一天' },
        { chapter: '完结 第14话', groupName: 'vip', imgPath: 'http://mhfm4tel.cdndm5.com/23/22834/20160513094128_180x240_22.jpg', title: '感染她嘴唇的欲望' },
        { chapter: '最新 第9话', groupName: 'vip', imgPath: 'http://mhfm5tel.cdndm5.com/54/53330/20190908233915_180x240_27.jpg', title: '如何抓住饿肚子上司的' },
        { chapter: '最新 第2话', groupName: 'vip', imgPath: 'http://mhfm5tel.cdndm5.com/66/65483/20201226205230_180x240_23.jpg', title: '恋爱魅魔的不妙情况' }
      ],
      userInfoUpdateShow: false,
      nickName: '',
      sex: '',
      uploader: [],
      birth: '',
      calendarShow: false,
      userContent: '',
      minDate: new Date(2020, 0, 1)
    };
  },
  methods: {
    returnPage () {
      this.$router.go(-1);
    },
    toComicCellPage (distinguish, pageName) {
      this.$router.push({
        path: '/comicCellPage',
        query: {
          distinguish: distinguish,
          pageName: pageName

        }
      });
    },
    calendarConfirm (date) {
      this.calendarShow = false;
      console.log(date);
      this.birth = this.formatDate(date);
    },
    formatDate (date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    userInfoUpdateClose () {
      this.nickName = '';
      this.sex = '';
      this.uploader = [];
      this.birth = '';
      this.calendarShow = false;
      this.userContent = '';
    }
  }
};
</script>

<style lang="less" scoped>
.userInfoSubject {
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, #d4ffec, #57f2cc, #4596fb);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: auto;
}
.userInfoSubject .bannerImg {
  width: 360px;
  position: relative;
  .van-image {
    width: 100%;
  }
  .userTitle {
    position: absolute;
    z-index: 1;
    width: 90px;
    height: 90px;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .van-icon {
    font-size: 25px;
    position: absolute;
    top: 3px;
    left: 2px;
    color: white;
  }
}
.userInfoSubject .statistics {
  width: 360px;
  height: 45px;
  display: flex;
  justify-content: space-between;
  div {
    height: 100%;
    width: 60px;
    float: left;
    font {
      display: block;
      width: 100%;
      display: flex;
      justify-content: center;
      font-size: 15px;
    }
  }
}
.userInfoSubject .userInfo {
  width: 360px;
  height: 66px;
  margin-top: 2px;
  div {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    /deep/ .van-button {
      font-size: 17px;
      color: tomato !important;
      border-color: tomato !important;
      width: 100px;
    }
  }
}
.userInfoSubject .collection {
  width: 360px;
  margin-top: 30px;
  .collectionHeard {
    width: 100%;
    height: 40px;
    margin-top: 10px;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      font-size: 18px;
      font-weight: bold;
      margin-left: 5px;
    }

    color: black;
    font-size: 15px;
    .more {
      i {
        position: relative;
        top: 2px;
      }
    }
  }
  .collectionMain {
    margin-top: 5px;
    height: 190px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
  }
}
.userInfoSubject .van-popup {
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, #4596fb, #57f2cc, #d4ffec);
  display: flex;
  justify-content: center;

  .van-form {
    width: 96%;
    margin-top: 50px;
    /deep/ .van-cell {
      background-color: transparent;
      .van-cell__title {
        width: 100px;
        color: #000000;
      }
      .van-cell__value {
        .van-field__body {
          input::-webkit-input-placeholder {
            color: #000000;
          }
          input::-moz-input-placeholder {
            color: #000000;
          }
          input::-ms-input-placeholder {
            color: #000000;
          }
          .van-field__control {
            i {
              border-color: #000000;
            }
          }
        }
      }
    }
    .van-popup {
      height: 80%;
    }
  }
}
</style>
